En Reactjs, ¿está bien usar el método React.Children.toArray para corregir la advertencia?
Warning: Each child in a list should have a unique "key" prop.Por ejemplo:
React.Children.toArray(myArray.map(value => <div>{value}</div>));el código anterior parece corregir la advertencia, pero me pregunto si es una buena práctica
No, eso no es una buena práctica. La razón por la que reacciona da una advertencia de que se necesitan claves es que reacciona necesita las claves para decir qué elemento corresponde a cuál entre renders. Su código no ayudará a reaccionar para lograrlo, por lo que solo está encubriendo el problema y no solucionándolo.
Idealmente, si su matriz de datos contiene identificaciones únicas, debe usarlas como claves:
hypotheticalArray.map(data => <div key={data.id}>{data.value}</div>);Si no hay identificadores únicos, el índice se puede usar como último recurso, pero se comportará mal si cambia el orden de la matriz.
myArray.map((value, index) => <div key={index}>{value}></div>);usa esto en su lugar.
myArray.map((value,index) => <div key={index} >{value}</div>)La clave en el elemento de reacción (hijo) se agrega para mantener la unicidad de los niños, las claves generalmente se usan en una lista de niños. Si alguno de los elementos secundarios cambia, la propiedad clave ayuda a reaccionar qué elementos secundarios cambiaron, ya que tendría una propiedad clave única .
De esta manera pasas la clave como un valor único
React.Children.toArray(myArray.map(value => <div key={value.id}>{value}</div>));